<template>
  <div class="container">
    <div class="search">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        size="mini"
        ref="formInline"
      >
        <el-form-item label="用户昵称" prop="nickName">
          <el-input
            v-model="formInline.nickName"
            placeholder="请输入用户昵称"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="formInline.status" placeholder="请选择状态">
            <el-option label="正常" value="1"> </el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button type="primary" @click="resetForm">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="btns">
      <div>
        <el-button icon="el-icon-search" size="mini" circle></el-button>
        <el-button icon="el-icon-refresh" circle size="mini"></el-button>
      </div>
    </div>
    <div class="table">
      <el-table border="" :data="tableData" stripe style="width: 100%">
        <el-table-column prop="nickName" label="用户昵称" width="">
        </el-table-column>
        <el-table-column prop="pic" label="用户头像" width="">
          <template slot-scope="scope">
            <img :src="scope.row.pi" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">正常</el-tag>
            <el-tag v-else>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="userRegtime" label="注册时间"> </el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="edit(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNumber"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <div class="dialog">
      <el-dialog
        title="修改"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户头像" prop="pic">
            <!-- <el-input v-model="ruleForm.pic"></el-input> -->
            <img :src="ruleForm.pic" alt="" />
          </el-form-item>
          <el-form-item label="用户昵称" prop="nickName">
            <el-input v-model="ruleForm.nickName" disabled></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <!-- <el-input v-model="ruleForm.status"></el-input> -->
            <el-radio v-model="ruleForm.status" :label="1">正常</el-radio>
            <el-radio v-model="ruleForm.status" :label="0">禁用</el-radio>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogTrue">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getTableData, dialogTrue } from "../../../api/vip";
export default {
  data() {
    return {
      // 对话框验证表单
      ruleForm: {
        t: "",
        userId: "",
        nickName: "",
        pic: "",
        status: "",
      },
      rules: {
        nickName: [{ required: true, message: "", trigger: "blur" }],
      },
      // 控制对话框
      dialogVisible: false,
      // 分页
      pageSize: 10,
      pageNumber: 1,
      total: 0,
      // 搜索栏
      formInline: {
        nickName: "",
        status: "",
      },
      // 表格
      tableData: [],
    };
  },
  methods: {
    //清除
    resetForm() {
      this.$refs["formInline"].resetFields();
    },
    //对话框确定
    dialogTrue() {
      this.ruleForm.t = Date.now();
      dialogTrue(this.ruleForm).then((res) => {
        console.log(res, "res");
        this.getData();
        this.dialogVisible = false;
      });
    },
    //关闭对话框
    handleClose(done) {
      done();
    },
    //编辑
    edit(e) {
      console.log(e, "e");
      this.dialogVisible = true;
      this.ruleForm.nickName = e.nickName;
      this.ruleForm.pic = e.pic;
      this.ruleForm.status = e.status;
      this.ruleForm.userId = e.userId;
    },
    // 初始化表格数据
    getData() {
      let date = new Date().getTime();
      let data = {
        t: date,
        current: this.pageNumber,
        size: this.pageSize,
      };
      getTableData(data).then((res) => {
        // console.log(res, "res");
        this.tableData = res.data.records;
        this.total = res.data.total;
        // console.log(this.tableData,'talbeData')
      });
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNumber = val;
      this.getData();
    },
    // 搜索
    onSubmit() {
      let date = new Date().getTime();

      let data = {
        t: date,
        current: this.pageNumber,
        size: this.pageSize,
        ...this.formInline,
      };
      getTableData(data).then((res) => {
        // console.log(res, "res");
        this.tableData = res.data.records;
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.container {
  .btns {
    text-align: right;
  }
  .page {
    .el-pagination {
      text-align: right;
    }
  }
}
</style>